當我們做一個會員登入系統，接 API 後，拿到一個像這樣子的一筆 JSON 資料。

$.get('https://randomuser.me/api/',function(result){
  console.log(result)
});

{
    "firstName": "Hu",
    "lastName": "Jim",
    "sex": "male",
    "age": 18,
    "address": 
    {
        "streetAddress": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postalCode": "10021"
    },
    "phoneNumber": 
    [
        {
         "type": "home",
         "number": "212 555-1234"
        },
        {
         "type": "fax",
         "number": "646 555-4567"
        }
   ]
}

思考：
什麼是 API ? 全名是應用程式接口( Application Programming Interface ) ，通常我們都直接說 API 。無論是在一個專案裡，由合作方提供的，或網路上公開讓大家使用的 API ，作用都在於資料的傳遞與服務的連接，提供一個標準的窗口。好比一個插座，我們使用電的服務，來使用不同的電器產品，但我們只需要知道電壓，不需要知道怎麼發電的。由上面的第一行我們可以看到「一段網址」，就是資料的提供來源。我們試著用 API 開發環境來跑看看。

什麼又是 JSON ?
通常我們會拿到一個物件或陣列格式，包物件或陣列的資料。這樣的結構我們稱為 JSON 。

{
  "results": [
    {"firstCol1": "data"},
    {"firstCol2": "data"},
    {"firstCol3": "data"},
    {"firstCol4": "data"},
    {"firstCol5": [
      {"SecCol1": "data"},
      {"SecCol2": "data"},
      {"SecCol3": "data"},
      {"SecCol4": "data"}
      ]
    } 
  ]     
}

看起來是物件或陣列，但在網路上傳遞資料的方式，是以字串的方式去處理的。所以我們必須使用 JSON.stringify 轉成字串，或 JSON.parse 去轉回物件或陣列。

再往回看一點點，我們到底在程式上要如何去接一個 API，可以使用 JS 原生的功能或者用套件，針對接 API 功能去處理，這裡提供五個例子，包含原始 XMLHttpRequest、jQuery、axios、superAgent、fetch。

接API的五種方式

最後我們拿到資料就可以進行畫面的呈現或資料的處理了！迫不及待！